小程序开发基础

发表于 | 更新于: | 分类于 ， | 阅读次数:
字数统计: 2,180 | 阅读时长 ≈ 8

小程序开发基础

2021.1.18 星期二 :

基础

配置

navigationStyle: custom 可以做顶部沉浸式体验，但是web-view不支持。

iOS/Android 客户端 6.7.2 版本开始，navigationStyle: custom 对 web-view 组件无效

全局变量

  1. app.js 文件中设置，globalData对象就是存储全局变量的。this.globalData.hasLogin 和getApp().globalData.hasLogin
    taro，uniapp 等多端框架，还会有其他方式。如果taro混合开发或者异步设置，上面方式可能并不合适。

    在taro中 getApp()只能取到一开始定义的值，并不能取到改变后的值
    <!–
    uni-app 全局变量实现的4种方式
    一、公用模块
    定义一个专用的模块，用来组织和管理这些全局的变量，在需要的页面引入。

注意：这种方式只支持多个vue页面或多个nvue页面之间公用，vue和nvue之间不公用。
二、挂载 Vue.prototype
将一些使用频率较高的常量或者方法，直接扩展到 Vue.prototype 上，每个 Vue 对象都会“继承”下来。

注意：这种方式只支持多个vue页面或多个nvue页面之间公用，vue和nvue之间不公用。

三、globalData
小程序中可以在 App 上声明全局变量，但在 Vue 中没有，uni-app 中在 App.vue 可以定义在 globalData 属性上，也可以使用 API 读写这个值。

这个方式支持vue和nvue共享数据。是目前nvue和vue共享数据的一种比较好的方式。
四、Vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

注意：这种方式只支持多个vue页面或多个nvue页面之间公用，vue和nvue之间不公用。
注意：对比前面的方式，该方式更加适合处理全局的并且值会发生变化的情况。
–>

样式

存储

### 耗时问题
<!– getStorage首次调用耗时较多，后续再调用getStorage就明显快很多，这是什么原因呢？

通过开发这工具的 network 设置 offline 模式，可以发现 getStorage 是通过了网络的。
微信小程序的 getStorage 是按用户来隔离的。 –>

小程序开发文档-存储

隔离策略
同一个微信用户，同一个小程序 storage 上限为 10MB。storage 以用户维度隔离，同一台设备上，A 用户无法读取到 B 用户的数据；不同小程序之间也无法互相读写数据。

清理策略
本地缓存的清理时机跟代码包一样，只有在代码包被清理的时候本地缓存才会被清理。

组件

封装组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// app.js
showModal(that,options){
    that.selectComponent('#modal').showModal(options);
  }
// 组件调用
const app = getApp()
app.showModal(this,{
    show: true,
    title: '函数调用',
    tabTitleShow: false,
    success :(res) => {
    wx.showToast({
        icon:"success",
        title: '肯定按钮点击',
    })
    },
    error: () => {
    wx.showToast({
        icon:'error',
        title: '取消按钮点击',
    })
  },
})

事件

请求

不能修改请求头。
referer是小程序固定：
#### 使用限制

  • 网络请求的 referer header 不可设置。其格式固定为 https://servicewechat.com/{appid}/{version}/page-frame.html，其中 {appid} 为小程序的 appid，{version} 为小程序的版本号，版本号为 0 表示为开发版、体验版以及审核版本，版本号为 devtools 表示为开发者工具，其余为正式版本；
  • wx.request、wx.uploadFile、wx.downloadFile 的最大并发限制是 10 个；
  • wx.connectSocket 的最大并发限制是 5 个。
  • 小程序进入后台运行后，如果 5s 内网络请求没有结束，会回调错误信息 fail interrupted；在回到前台之前，网络请求接口调用都会无法调用。

微信小程序没有cookie！！！
那就需要我们自己去存储cookie，并且在请求的时候加上cookie。

1
2
3
4
5
6
7
8
9
10
11
static getHeader ({ method, header }) {
    const defaultHeader = {
        'Cookie': cookie.getCookie(),
    }

    if (method == 'POST') {
        defaultHeader['Content-Type'] = 'application/x-www-form-urlencoded'
    }

    return Object.assign({}, defaultHeader, header)
}

小程序内调用 web-view 组件实现内嵌的网页，目前仅支持部分 jsapi 能力，关于 web-view 接口具体使用说明和限制，请 点击查看
文档-web-view: https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html

web-view网页中可使用JSSDK 1.3.2提供的接口返回小程序页面。

1
2
3
4
wx.miniProgram.navigateTo({url: '/path/to/page'})
wx.miniProgram.postMessage({ data: 'foo' })
wx.miniProgram.postMessage({ data: {foo: 'bar'} })
wx.miniProgram.getEnv(function(res) { console.log(res.miniprogram) })

功能

分享

关于微信 OpenSDK 适配 iOS 16 系统的说明: https://developers.weixin.qq.com/community/develop/doc/000ac2067c82b85b064e79f0455401?page=3#comment-list
微信 iOS OpenSDK 通过剪切板在应用和微信间进行数据传递，在用户同意后完成授权登录、分享等功能。具体说明如下：

为了提升用户体验，微信和 OpenSDK 进行数据传输方式的改造，尽量避免使用剪切板传递数据。具体说明如下：
1、对于一般传输数据的接口，会在 Scheme 或者 Universal Link 中携带相关数据；
2、对因传输数据量较大等原因无法使用上述数据传输方式的接口，保持通过剪切板传递数据。

因此，开发者需要应用升级 OpenSDK，并配合微信客户端 8.0.24 及以上版本使用。

分包

分包加载
目前小程序分包大小有以下限制：

  • 整个小程序所有分包大小不超过 20M
  • 单个分包/主包大小不能超过 2M

具体使用方法请参考：

除了 代码包体积、代码注入、首屏渲染之外，发版频率等因素也会影响小程序启动耗时。

消息订阅

文档-模板消息

请注意，小程序模板消息接口将于2020年1月10日下线，开发者可使用订阅消息功能
文档-小程序订阅消息

消息类型
一次性订阅消息用
长期订阅消息

目前长期性订阅消息仅向政务民生、医疗、交通、金融、教育等线下公共服务开放，后期将逐步支持到其他线下公共服务业务。
设备订阅消息

订阅消息和模板消息

再见，小程序模板消息！今天起，用订阅消息来通知用户吧
微信公开课 2020-01-10 21:43

  1. 1月11号开始，小程序开发者发布的新版本不支持模板消息，仅支持订阅消息。
  2. 以防万一，为避免用户的体验受到损害，我们也提供了三个月的“缓冲期”。
    即4月10号24时前使用模板消息。

其它

小程序性能优化指南-官方

其他

权限

域名配置

如果没有服务器？或者域名服务器根目录没有操作权限呢？？

必须在服务器根目录配置，否则请走nginx代理转发。
没有发现其他的可以绕过微信验证的方式。

政策

禁止小程序JavaScript解释器

关于禁止小程序JavaScript解释器使用规范要求：https://developers.weixin.qq.com/community/minihome/doc/0000ae500e4fd0541f2ea33755b801

为进一步提升小程序的安全性和用户体验，目前平台对提审的小程序均需进行安全检测，在检测过程中，发现有小程序采用内置 JavaScript 解释器（如eval5、estime、evil-eval等）的方式，动态执行JS代码、对小程序wxml代码进行热更新。对于使用解释器的小程序，平台将自2022年7月6日开始在代码审核环节进行驳回，请各位开发者于7月6日前完成自查、修复。
<!–

小程序不让用 JS 解释器？那我再肛一次鹅厂

  1. 我们首先要写一个 JavaScript 的编译器，将 JavaScript 代码编译成二进制的字节码。
  2. 找一张图片，将字节码编码并隐藏进图片中。
  3. 在小程序中引入藏有 JavaScript 字节码的图片，并且解码出字节码。
  4. 写一个对应的字节码虚拟机，并且执行从图片中解出的字节码。

为什么无法从根本上禁止小程序代码的热更
先说结论，只要满足以下两个条件，那么从根本上禁止热更都是无稽之谈：
宿主语言图灵完备
允许通过网络读取数据
–>

knowledge is no pay,reward is kindness
分享到： 收藏夹 复制网址 邮件 微信 QQ空间 腾讯微博 豆瓣 一键分享 更多
0%